<template>
	<view class="home-header">
		<!-- #ifndef MP -->
		<u-navbar :is-back="false" height="64" :background="background" :border-bottom="false" >
			<view class="header-bar">
				<view class="bar-left">
					<view class="welcome coco-ellipsis">Hello,{{userInfo.username}}!</view>
					<view class="location">
						<view class="lab-text">{{address}}{{mac}}</view>
						<uni-icons type="arrowright" size="12" color="#6c6c6c"></uni-icons>
					</view>
				</view>
				<view class="bar-right">
					<view class="icon-items">
						<!-- <view class="icon-item">
							<u-icon name="plus-square-fill" color="#252525" size="40" ></u-icon>
						</view> -->
						<!-- <view class="icon-item" @click="toJump('/pages/device/search')"  v-if="haveDevice">
							<u-icon :name="$IMG_URL + '/imgs/icons/ic-networking.png'" color="#252525" size="40"></u-icon>
						</view> -->
						<view class="icon-item" @click="addDevice" v-if="!haveDevice">
							<u-icon name="plus-circle-fill" color="#ffab00" size="40"></u-icon>
						</view>
						<view class="icon-item"  @click="toJump('/pages/user/share-equiment',{device_id:device.device_id})"  v-if="haveDevice">
							<u-icon name="plus-people-fill" color="#252525" size="40"></u-icon>
						</view>
						<view class="icon-item">
							<u-icon name="server-fill" color="#252525" size="36"></u-icon>
						</view>
					</view>
					<view class="weather-box">
						<view class="box-hd">
							<!-- <u-icon name="qing" custom-prefix="weather-icon" size="32" color="#333333"></u-icon> -->
							<text class="lab-text">{{weather.weather}}</text>
						</view>
						<view class="box-bd">
							<text class="lab-text">湿度:{{weather.humidity}}%</text>
							<text class="lab-text">温度:{{weather.temp}}℃</text>
						</view>
					</view>
				</view>
			</view>
		</u-navbar>
		<!-- #endif -->
		
		<!-- #ifdef MP -->
		<u-navbar backIconName="" :backTextStyle="navbackTextStyle"  backText="首页"  :background="background" :border-bottom="true" ></u-navbar>
		<view class="mpheader-mod">
			<view class="header-bar">
				<view class="bar-left">
					<view class="welcome coco-ellipsis">Hello,{{userInfo.nickname}}!</view>
					<view class="location">
						<view class="lab-text">{{address}}{{mac}}</view>
						<uni-icons type="arrowright" size="12" color="#6c6c6c"></uni-icons>
					</view>
				</view>
				<view class="bar-right">
					<view class="icon-items">
						<!-- <view class="icon-item">
							<u-icon name="plus-square-fill" color="#252525" size="40" ></u-icon>
						</view> -->
						<view class="icon-item" @click="toJump('/pages/device/search')"  v-if="haveDevice">
							<u-icon :name="$IMG_URL + '/imgs/icons/ic-networking.png'" color="#252525" size="40"></u-icon>
						</view>
						<view class="icon-item" @click="addDevice" v-if="!haveDevice">
							<u-icon name="plus-circle-fill" color="#ffab00" size="40"></u-icon>
						</view>
						<view class="icon-item"  @click="toJump('/pages/user/share-equiment')"  v-if="haveDevice">
							<u-icon name="plus-people-fill" color="#252525" size="40"></u-icon>
						</view>
						<view class="icon-item">
							<u-icon name="server-fill" color="#252525" size="36"></u-icon>
						</view>
					</view>
					<view class="weather-box">
						<view class="box-hd">
							<!-- <u-icon name="qing" custom-prefix="weather-icon" size="32" color="#333333"></u-icon> -->
							<text class="lab-text">{{weather.weather}}</text>
						</view>
						<view class="box-bd">
							<text class="lab-text">湿度:{{weather.humidity}}%</text>
							<text class="lab-text">温度:{{weather.temp}}℃</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- #endif -->
	</view>
</template>

<script>
import Auth from '@/shopro/permission/index.js';
import { mapMutations, mapActions, mapState} from 'vuex';
export default {
	components: {},
	data() {
		return {
			background: {
				backgroundColor: '#f9f9f9',
			},
			weather:{weather:'',humidity:0,temp:0},
			address:'',
			mac:'',
			navbackTextStyle: {
				color: '#000',
				fontSize: '36rpx',
				fontWeight: '500'
			}
		};
	},
	props: {
		haveDevice:{
			type:Boolean,
			default:false
		},
		device:{
			type:Object,
			default:{}
		}
	},
	computed: {
		...mapState({
			userInfo: ({ user }) => user.userInfo,
		})
	},
	created() {
		this.getLocation();
		this.getUserInfo();
	},
	methods: {
		...mapActions(['getUserInfo']),
		 jump(data) {
		 	this.$tools.routerTo(data.path);
		 },
		toJump(path,param){
			this.$Router.push({
				path:path,
				query:param
			});
		},
		 addDevice(){
			 // var smartwifiModule = uni.requireNativePlugin("coco3g-smartwifi")
			 // smartwifiModule.set({
				//    'token': this.userInfo.token, 
				//    'userid': this.userInfo.id
				//  },
				//  (ret) => {
				//    let mac = ret['mac'];
				//    this.mac = "MAC地址："+mac;
				//  })
			// #ifdef APP-VUE
			this.jump({
				// path:'/pages/device/add-device-step2'
				path:'/pages/device/bluetooth'
			})
			// #endif
			// #ifdef MP
			this.jump({
				path:'/pages/device/add-device-wx'
			})
			// #endif
		 },
		 getWeather(cityname){
			 this.$get("/api/weather/index",{cityname:cityname}).then(res => {
				 console.log("weather",res);
				 this.weather = res.data;
			 })
		 },
		 // 获取位置
		 async getLocation() {
		 	let authState = await new Auth('userLocation').check();
		 	// #ifdef MP ||　APP-VUE
		 	authState &&
		 		uni.getLocation({
		 			type: 'gcj02',
					geocode:true,
		 			success: res => {
		 				console.log(res);
		 				this.lng = res.longitude;
		 				this.lat = res.latitude;
		 				// this.getStoreAddress();
						// #ifdef MP
						this.getLocationInfo(res);
						// #endif
						// #ifdef APP-VUE
						this.address = res.address.province + res.address.city + res.address.district;
						this.getWeather(res.address.city);
						// #endif
		 			},
		 			fail: err => {
		 				console.log('确认订单自提位置AA：', err);
		 			}
		 		});
		 	// #endif
		 	// #ifdef H5
		 	uni.getLocation({
		 		type: 'gcj02',
		 		success: res => {
		 			console.log("!!!");
		 			console.log(res);
		 			this.lng = res.longitude;
		 			this.lat = res.latitude;
		 			// this.getStoreAddress();
		 		}
		 	});
		 	// #endif
		 },
		 //逆坐标解析
		 async getLocationInfo(ress) {
		 	const [error, res] = await uni.request({
		 		url: `https://restapi.amap.com/v3/geocode/regeo?location=${ress.longitude},${ress.latitude}&key=f3413973cf9390e7139766e668dff246`
		 	});
		 	console.log('逆坐标解析：', res);
		 	if (res.data.status === '1') {
		 		const addressComponent = res.data.regeocode.addressComponent;
		 		let city = addressComponent.city;
		 		this.address = addressComponent.province+addressComponent.city+addressComponent.district;
		 		// this.address = res.address.province + res.address.city + res.address.district;
		 		this.getWeather(city);
		 	} else {
		 		console.log('%c逆地址解析失败，请检查是否在env中配置地图key', 'color:green;background:yellow');
		 	}
		 }
	}
};
</script>

<style lang="scss" scoped>
	.mpheader-mod{
		display: flex;
		align-items: center;
		height: 64px;
		background-image: linear-gradient(to bottom,#f9f9f9,#fff);
	}
	.home-header{
		
	}
	.header-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		padding: 0 24upx;
		line-height: 1.2;
		.bar-left{
			flex: 1;
			min-width: 0;
		}
		.bar-right{
			text-align: right;
		}
		.welcome{
			font-weight: bold;
			font-size: 20px;
			margin-bottom: 5px;
		}
		.location{
			display: flex;
			align-items: center;
			font-size: 12px;
			color: $u-content-color;
			.lab-text{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 280upx;
				margin-right:2px;
			}
		}
		.weather-box{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.box-hd{
				display: flex;
				align-items: center;
				font-size: 12px;
				.lab-text{
					font-weight: bold;
					margin-left: 2px;
				}
			}
			.box-bd{
				font-size: 10px;
				.lab-text{
					margin-left: 6px;
				}
			}
		}
		.icon-items{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			line-height: 1;
			margin-right: -8upx;
			margin-bottom: 10upx;
			.icon-item{
				font-size: 36upx;
				padding: 8upx 6upx;
				margin-left: 16upx;
				display: flex;
				align-items: center;
				justify-content: center;
				 
			}
		}
	}
</style>
